<template>
    <!-- 组件的模板 -->
    <div class="page show-navbar" style="min-height:0">        
        <ul class="mod-tabs">
            <li><a :class="{'current':notReadBtn}" href="javascript:;" @click="notReadClickFn">未读{{notReadCount}}</a></li>
            <li><a :class="{'current':readBtn}" href="javascript:;" @click="readClickFn">已读</a></li>
        </ul>
        <template  v-if="notReadlist.length || readList.length">
            <ul class="notice-list" v-if="notReadBtn" id="notRead">
                <li class="com-border-bottom" v-for="item in notReadlist">
                    <a href="javascript:;" @click="gotoDetails(item.id)">                    
                        <h2 v-if="item.is_receipt == 1">
                            <span class="state state-1 com-border-outside" v-if="item.report == 0">待确认</span>
                            <span class="state state-2 com-border-outside" v-if="item.report == 1">已确认</span>
                            {{item.title}} 
                        </h2>
                        <h2 v-else>{{item.title}}</h2>
                        <p>{{replaceBr(item.desc)}}</p>
                        <span class="time">{{item.create_at | formatDateTime}}</span>                    
                    </a>
                </li>
            </ul>
            <ul class="notice-list" v-if='readBtn' id="read">
                <li class="com-border-bottom" v-for="item in readList">
                    <a href="javascript:;" @click="gotoDetails_read(item.id)">                    
                        <h2 v-if="item.is_receipt == 1">
                            <span class="state state-1 com-border-outside" v-if="item.report == 0">待确认</span>
                            <span class="state state-2 com-border-outside" v-if="item.report == 1">已确认</span>
                            {{item.title}}
                        </h2>
                        <h2 v-else>{{item.title}}</h2>
                        <p>{{replaceBr(item.desc)}}</p>
                        <span class="time">{{item.create_at | formatDateTime}}</span>                    
                    </a>
                </li>
            </ul>
        </template>
        
    </div> 
    <!-- 空页面 -->
    <div class="page empty-page" v-show="empty_not">
        <div class="mod-empty new_mod-empty4">
            <div class="icon icon_6"></div>
            <p class="tip">还没有未读公告</p>
        </div>
    </div> 
    <div class="page empty-page" v-show="empty">
        <div class="mod-empty new_mod-empty4">
            <div class="icon icon_6"></div>
            <p class="tip">还没有已读公告</p>
        </div>
    </div> 
    <div class="page__bd" v-show="showMore_not">
        <div class="weui-loadmore">
           <i class="weui-loading"></i>
           <span class="weui-loadmore__tips">正在加载</span>
        </div>
    </div>
    <div class="page__bd" v-show="showMore">
        <div class="weui-loadmore">
           <i class="weui-loading"></i>
           <span class="weui-loadmore__tips">正在加载</span>
        </div>
    </div>    
</template>

<script>
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    import * as util from 'js/util.js'
    import commonPage from 'clientApi/commonPage.js'
    import widget from 'gapi/widget.js'
    import Empty from 'components/Empty/Empty'
    import KCApiApp from 'clientApi/KCApiApp.js'

    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */
     let state_id = ''
     let read = 1
     let teamId = ''
     let projectId = ''
     let userId = ''
     let startPage_not= 0
     let offset_not = 20
     let startPage = 0
     let offset = 20
     let canLoadMore_not = 1
     let canLoadMore = 1
     let count = ''
     // import Dialog from 'components/Dialog/Dialog'
    /**
     *  组件实例对象
     */
    export default {
        components: {
            Empty
        },
        data: function(){
            return{
                showMore_not:false, // 未读公告 ‘正在加载’ 标示显示  默认不显示  当分页时显示
                showMore:false,    // 已读公告 , ‘正在加载’ 标示显示  默认不显示  当分页时显示
                empty_not:false,   // 未读公告 ，空页面展示
                empty:false,       // 已读公告 ，  空页面展示
                notReadBtn:true,   // 未读公告tab 按钮显示状态
                readBtn:false,     // 已读公告tab 按钮显示状态
                notReadlist:[],    // 未读公告列表
                readList:[],       // 已读公告列表
                notReadCount:''   // 未读公告总数
            }
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){ 
                // 初始化未读列表
                this.empty = false
                this.empty_not = false
                
                if(state_id){
                    if(state_id == 0){
                        this.notReadClickFn()
                    }else if(state_id == 1){
                        this.readClickFn()  
                    }
                }else{
                    this.notReadClickFn()
                }
                window.loadData = (data) => {
                    this.notReadBtn = true
                    this.readBtn = false
                    console.log(data.key)
                    if(data.key == 2){
                        this.readClickFn()
                    }else{
                       this.notReadClickFn()  
                    }
                }  
            },
            replaceBr(str){
                return str.replace(/#br#/g,'')
            },
            // 未读按钮
            notReadClickFn (){
                this.empty = false
                startPage_not = 0
                this.notReadBtn = true
                this.readBtn = false
                commonPage.loadPageStatus('loading')
                util.ajax({
                    url:'/notice/list',
                    type:'GET',
                    data:{
                        project_id:projectId,
                        team_id:teamId,
                        read: 0,
                        offset: offset_not,
                        start: startPage_not
                    },
                    timeout:10000,
                    success:(obj) => {
                        console.log(offset_not)
                        console.log(JSON.stringify(obj)) 
                        commonPage.loadPageStatus('loadSuccess')
                        this.showMore_not = false
                        if(obj&&obj.errno == 0){
                            //埋点
                            let statisticsLog_data = {
                                event_id: '公告列表-未读',
                                // event_label: data.event_label,(预留，现在不用传此参数)
                                event_param: {
                                    ca_from: 'unread',
                                    project_id: projectId,
                                }
                            }
                            // alert(JSON.stringify(statisticsLog_data))
                            KCApiApp.statisticsLog(statisticsLog_data)

                            if(obj.data.count==0){
                                this.empty_not = true
                                this.empty = false
                            }else{
                                this.empty_not = false
                                this.empty = false
                            }
                            this.notReadlist = obj.data.list
                            this.notReadCount = obj.data.count == 0 ? '' : '(' + obj.data.count + ')'
                            startPage_not = obj.data.next
                            if(!obj.data.list.length){
                                canLoadMore_not = 0
                            }
                            
                        }else{
                            widget.toast(obj.errmsg)
                        }
                    },
                    error: (xhr, status) => {
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('服务器异常')
                    },
                    noNetwork: () => {
                        // 无网络的回调
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('网络连接失败，请检查网络')
                    }
                })
            },
            // 已读按钮
            readClickFn (){
                this.empty_not = false
                this.notReadBtn = false
                this.readBtn = true
                startPage = 0
                commonPage.loadPageStatus('loading')
                util.ajax({
                    url:'/notice/list',
                    type:'GET',
                    data:{
                        project_id:projectId,
                        team_id:teamId,
                        read: 1,
                        offset: offset,
                        start: startPage
                    },
                    timeout:10000,
                    success:(obj) => {
                        console.log(JSON.stringify(obj)) 
                        commonPage.loadPageStatus('loadSuccess')
                        this.showMore = false
                        if(obj&&obj.errno == 0){
                            //埋点
                            let statisticsLog_data = {
                                event_id: '公告列表-已读',
                                // event_label: data.event_label,(预留，现在不用传此参数)
                                event_param: {
                                    ca_from: 'read',
                                    project_id: projectId,
                                }
                            }
                            // alert(JSON.stringify(statisticsLog_data))
                            KCApiApp.statisticsLog(statisticsLog_data)

                            if(obj.data.count == 0){
                                this.empty_not = false
                                this.empty = true
                            }else{
                                this.empty_not = false
                                this.empty = false
                            }
                            this.readList = obj.data.list
                            count = obj.data.count
                            startPage = obj.data.next
                            if(!obj.data.list.length){
                                canLoadMore = 0
                            }
                        }else{
                            widget.toast(obj.errmsg)
                        }
                    },
                    error: (xhr, status) => {
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('服务器异常')
                    },
                    noNetwork: () => {
                        // 无网络的回调
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('网络连接失败，请检查网络')
                    }
                })
            },
            // 未读分页
            notReadClickFnMore (){
                this.notReadBtn = true
                this.readBtn = false
                util.ajax({
                    url:'/notice/list',
                    type:'GET',
                    data:{
                        project_id:projectId,
                        team_id:teamId,
                        read: 0,
                        offset: offset_not,
                        start: startPage_not
                    },
                    timeout:10000,
                    success:(obj) => {
                        console.log(offset_not)
                        console.log(obj)
                        this.showMore_not = false
                        if(obj&&obj.errno == 0){
                            obj.data.list.forEach((item)=>{
                                this.notReadlist.push(item)
                            })
                            this.notReadCount = obj.data.count == 0 ? '' : '(' + obj.data.count + ')'
                            startPage_not = obj.data.next
                            // this.empty_not = false
                            // this.empty = false

                            if(!obj.data.list.length){
                                // this.empty_not = true
                                // this.empty = false
                                canLoadMore_not = 0
                            }
                        }else{
                            widget.toast(obj.errmsg)
                        }
                    },
                    error: (xhr, status) => {
                        widget.toast('服务器异常')
                    },
                    noNetwork: () => {
                        // 无网络的回调
                        widget.toast('网络连接失败，请检查网络')
                    }
                })
            },
            // 已读分页
            readClickFnMore (){
                console.log(startPage)
                this.notReadBtn = false
                this.readBtn = true
                util.ajax({
                    url:'/notice/list',
                    type:'GET',
                    data:{
                        project_id:projectId,
                        team_id:teamId,
                        read: 1,
                        offset: offset,
                        start: startPage
                    },
                    timeout:10000,
                    success:(obj) => {
                        console.log(startPage)
                        console.log(JSON.stringify(obj))
                        this.showMore = false
                        if(obj&&obj.errno == 0){
                            obj.data.list.forEach((item)=>{
                                this.readList.push(item)
                            })
                            startPage = obj.data.next
                            count = obj.data.count
                            if(!obj.data.list.length){
                                canLoadMore = 0
                            }
                            
                        }else{
                            widget.toast(obj.errmsg)
                        }
                    },
                    error: (xhr, status) => {
                        widget.toast('服务器异常')
                    },
                    noNetwork: () => { 
                        // 无网络的回调
                        widget.toast('网络连接失败，请检查网络')
                    }
                })
            },
            /*发布公告*/
            send (){
                //埋点
                let statisticsLog_data = {
                    event_id: '公告列表-发公告',
                    // event_label: data.event_label,(预留，现在不用传此参数)
                    event_param: {
                        ca_from: 'release',
                        project_id: projectId,
                    }
                }
                // alert(JSON.stringify(statisticsLog_data))
                KCApiApp.statisticsLog(statisticsLog_data)
                let encodeStr = encodeURIComponent(`teamId=${teamId}&projectId=${projectId}&userId=${userId}`)
                location.href = `dmsaas://Pushad?urdData=${encodeStr}`
            }, 
            // 前往公告详情
            gotoDetails (noticeId){
                //埋点
                let statisticsLog_data = {
                    event_id: '公告列表-公告点击',
                    // event_label: data.event_label,(预留，现在不用传此参数)
                    event_param: {
                        ca_from: 'notice',
                        project_id: projectId,
                    }
                }
                // alert(JSON.stringify(statisticsLog_data))
                KCApiApp.statisticsLog(statisticsLog_data)
                let encodeStr = encodeURIComponent(`teamId=${teamId}&projectId=${projectId}&noticeId=${noticeId}`)
                location.href = `dmsaas://Addetail?urdData=${encodeStr}`
            },
             // 前往公告详情
            gotoDetails_read (noticeId){
                //埋点
                let statisticsLog_data = {
                    event_id: '公告列表-公告点击',
                    // event_label: data.event_label,(预留，现在不用传此参数)
                    event_param: {
                        ca_from: 'notice',
                        project_id: projectId,
                    }
                }
                // alert(JSON.stringify(statisticsLog_data))
                KCApiApp.statisticsLog(statisticsLog_data)
                let encodeStr = encodeURIComponent(`teamId=${teamId}&projectId=${projectId}&noticeId=${noticeId}&read=${read}`)
                location.href = `dmsaas://Addetail?urdData=${encodeStr}`
            }

        },
        filters: {
            formatDateTime(date){
                return util.formatDate(date);
            }
        },
        created(){ 
            teamId = util.getQueryString('team_id')
            projectId = util.getQueryString('project_id')
            userId = util.getQueryString('user_id')
            state_id = util.getQueryString('state_id')
            this.init();
            
            // 未读分页
            commonPage.registerHitPageBottomListener(() => {
                if(this.notReadBtn){
                    if(this.notReadlist.length != this.notReadCount){
                        canLoadMore_not = 1
                        this.showMore_not = true
                        this.notReadClickFnMore()
                    }
                    if(canLoadMore_not==0){
                        return
                    }
                    
                }else if(this.readBtn){
                    if(this.readList.length != count){
                        canLoadMore = 1
                        this.showMore = true
                        this.readClickFnMore()
                        return
                    }
                    if(canLoadMore==0){
                        return
                    }
                }
                
            }, 0)

            window.goBack = () => {
                commonPage.goBack(1,{})
            }
            commonPage.updateTitleBar({
                backAction: 'goBack',
                leftAction: 'goBack'
            });

        },
        ready (){
            /*权限获取*/
            util.ajax({
                url:'/permission/application',
                type:'GET',
                data:{
                    team_id:teamId, 
                    project_id:projectId,
                    application_id:4
                },
                timeout:10000,
                success:(obj) => {
                    console.log(JSON.stringify(obj))
                    let result = obj.data;
                    if(obj.errno == 0){
                        result.forEach( (item) => {
                            if(item.id_name == 'notice_add'){   //判断是否有权发公告
                                /*设置Native的头部*/
                                commonPage.updateTitleBar({
                                    // backAction: 'checkChange',    // 点击返回按钮的动作（即回调函数名称）
                                    // leftDisplay: false,            // 是否显示左按钮
                                    // leftText: '',                // 左按钮文案
                                    // leftAction: '',    // 点击左按钮的动作（即回调函数名称）
                                    rightDisplay: true,            // 是否显示右按钮
                                    rightText: '发公告',            // 右按钮文案
                                    rightAction: 'sendNotice'    // 点击右按钮的文案（即回调函数名称）
                                })
                            }
                        })
                        
                    }else{
                        widget.toast(obj.errmsg)
                    }
                },
                error: (xhr, status) => {
                    widget.toast('服务器异常')
                },
                noNetwork: () => {
                    // 无网络的回调
                    widget.toast('网络连接失败，请检查网络')
                }
            })
            window.sendNotice = () => {
                this.send()
            } 
        }
        
    }

    
</script>

<!-- CSS 样式 -->

<style src="../../node_modules/weui/dist/style/weui.css"></style>
<style src="../../static/css/common.css"></style>
<style src="../../static/css/notice.css"></style>
<style>
    .mod-tabs{
        position: fixed;
       
    }    
</style>



